/**
 * Created by showtan on 2018/12/27.
 * 个人信息
 */

import Modal from 'react-native-modalbox';
import ModalBoxAdapt from '../../components/ModalBoxAdapt';
import ImagePicker from 'react-native-image-picker';
import Picker from 'react-native-picker';
import Picker1 from 'react-native-picker';
import { apiPostPic } from '../../utils/Api';

let photoOptions = {
  title: '封面选择',
  cancelButtonTitle: '取消',
  takePhotoButtonTitle: '拍照上传',
  chooseFromLibraryButtonTitle: '选择相册',
  quality: 0.75,
  allowsEditing: true,
  noData: false,
  storageOptions: {
    skipBackup: true,
    path: 'images',
    picture: ''
  }
};

export default class UpdateInfo extends Component {
  static navigationOptions = ({ navigation }) => ({
    title: '个人信息'
  });
  constructor(props) {
    super(props);
    this.state = {
      name: '刘大帅',
      sign: '所爱隔山海，山海不可平',
      intro: '',
      location: '待完善',
      birthday: '待完善',
      selected: 2, //
      show: 0,
      keyboardHeight: 0, // 键盘高度
      text: ''
    }
  }
  componentDidMount() {
  }
  _sure = () => {
    Toast.success('修改成功');
    this.refs.modal.close();
  }
  _pickPhoto = () => {
    Picker1.hide(); Picker.hide();
    ImagePicker.showImagePicker(photoOptions, (res) => {
      if (res.didCancel) { return };  // res.uri
      // apiPostPic(NetAddr.uploadAvatarAndName, images, params, success => {

      // }, fail => {

      // }, error => {

      // });
      Toast.show({
        text: '上传中',
        icon: <ActivityIndicator size='large' color={Theme.toastIconTintColor} />,
        position: 'center',
        duration: 3000,
      });
      setTimeout(() => {
        Toast.success('修改成功');
      }, 3000)
    })
  }
  onClose = () => {

  }
  _selected = (data) => {
    Picker1.hide(); Picker.hide();
    this.setState({ selected: data.sex });
    this.refs.modal1.close();
  }
  // 地区选择
  _showAreaPicker = () => {
    Picker.init({
      pickerToolBarFontSize: 16,
      pickerToolBarBg: [255, 255, 255, 1],
      pickerFontSize: 18,
      pickerFontColor: [0, 0, 0, 1],
      pickerBg: [237, 237, 237, 1],
      pickerConfirmBtnText: '确定',
      pickerCancelBtnText: '取消',
      pickerTitleText: '',
      pickerConfirmBtnColor: [42, 144, 215, 1],
      pickerCancelBtnColor: [42, 144, 215, 1],
      pickerData: [
        {
          '北京': [
            { '北京': ['东城', '西城'] }
          ]
        },
        {
          '四川': [
            { '成都': ['武侯', '双流'] },
            { '绵阳': ['游仙', '三台'] },
          ]
        },
      ],
      selectedValue: ['四川', '成都', '武侯'],
      onPickerConfirm: pickedValue => {
        this.setState({
          location: pickedValue[0] + '-' + pickedValue[1] + '-' + pickedValue[2]
        });
      }
    });
    Picker.show();
  }
  // 生日选择
  _showTimePicker = () => {
    // Picker.show();
    Picker1.init({
      pickerToolBarFontSize: 16,
      pickerToolBarBg: [255, 255, 255, 1],
      pickerFontSize: 18,
      pickerFontColor: [0, 0, 0, 1],
      pickerBg: [237, 237, 237, 1],
      pickerConfirmBtnText: '确定',
      pickerCancelBtnText: '取消',
      pickerTitleText: '',
      pickerConfirmBtnColor: [42, 144, 215, 1],
      pickerCancelBtnColor: [42, 144, 215, 1],
      pickerData: CommonUtils._createDateData(),
      selectedValue: ['1999', '12', '1'],
      onPickerConfirm: pickedValue => {
        this.setState({
          // birthday: pickedValue[0].split(' 年')[0] + '-' + pickedValue[1].split(' 月')[0] + '-' + pickedValue[2].split(' 日')[0]
          birthday: pickedValue[0] + '-' + pickedValue[1] + '-' + pickedValue[2]
        });
      }
    });
    Picker1.show();
  }
  // 键盘显示、隐藏
  _update = (info) => {
    if (info == 'sign') {
      this.setState({ show: 1 });
      this.refs.modal2.open();
    } else {
      this.setState({ show: 2 });
      this.refs.modal2.open();
    }
  }
  componentWillUnmount() {
    Picker1.hide(); Picker.hide();
  }
  render() {
    let infoData = [
      { title: '头像', name: Images.other.icon_flatlist, onPress: this._pickPhoto },
      { title: '用户名', name: this.state.name, onPress: () => { this.refs.modal.open(); Picker.hide(); Picker1.hide(); } },
      { title: '个性签名', name: this.state.sign, onPress: () => this._update('sign') },
      { title: '个人简介', name: this.state.intro, onPress: () => this._update('intro') },
      { title: '性别', name: this.state.selected == 1 ? '男' : '女', onPress: () => { this.refs.modal1.open(); Picker.hide(); Picker1.hide(); } },
      { title: '生日', name: this.state.birthday, onPress: this._showTimePicker },
      { title: '所在地', name: this.state.location, onPress: this._showAreaPicker },
    ];
    let selectedData = [{ title: '女', sex: 2, status: this.state.selected == 2 ? true : false }, { title: '男', sex: 1, status: this.state.selected == 1 ? true : false }];
    return (
      <View style={styles.container}>
        <View style={{ borderBottomWidth: StyleSheet.hairlineWidth, borderColor: '#dcdcdc' }}>
          {infoData.map((item, index) => <View key={index} style={{ backgroundColor: '#fff' }}>
            {(index == 4 || index == 0) && <View style={styles.cellStyle} />}
            <TouchableOpacity onPress={item.onPress} activeOpacity={.8} style={[styles.itemCell, (index == 3 || index == 6) && { borderBottomWidth: 0 }]}>
              <Text style={{ color: '#333', fontSize: adapt(16) }}>{item.title}</Text>
              <View style={{ flexDirection: 'row', alignItems: 'center' }}>
                {index == 0 ? <Image source={item.name} style={{ width: adapt(30), height: adapt(30), borderRadius: adapt(15) }} />
                  : <Text numberOfLines={1} ellipsizeMode='middle' style={{ color: item.name == '待完善' ? '#2a90d7' : '#999', fontSize: adapt(16), textAlign: 'right', width: width - adapt(130) }}>{item.name}</Text>}
                <Image source={Images.other.icon_jinru} style={styles.rightIcon} />
              </View>
            </TouchableOpacity>
          </View>)}
        </View>
        <Modal style={{ borderRadius: adapt(6), height: adapt(200), width: width - adapt(60) }}
          position='center' ref='modal' swipeToClose={false} backdropOpacity={0.3} onClosed={this.onClose}>
          <Text style={styles.updateNameTextStyle}>修改昵称</Text>
          <TextInput
            maxLength={6}
            autoFocus={true}
            placeholder='刘大帅'
            clearButtonMode='while-editing'
            selectionColor={themeColor}
            underlineColorAndroid='transparent'
            style={styles.textInptStyle}
            onChangeText={(name) => this.setState({ name })}
            value={this.state.name}
          />
          <View style={{ alignItems: 'center', marginTop: adapt(8) }}>
            <Text style={{ fontSize: adapt(12) }}>*昵称不能超过6个字符</Text>
          </View>
          <View style={styles.actionCell}>
            <Text onPress={() => { this.setState({ name: '' }); this.refs.modal.close(); }} style={{ color: '#aaa' }}>取消</Text>
            <Text onPress={this._sure} style={{ color: themeColor, marginHorizontal: adapt(20) }}>确定</Text>
          </View>
        </Modal>
        <Modal style={{ borderRadius: adapt(6), height: adapt(160), width: width - adapt(60) }}
          position='center' ref='modal1' swipeToClose={false} backdropOpacity={0.3} onClosed={this.onClose}>
          <Text style={{ fontSize: adapt(20), fontWeight: '400', marginLeft: adapt(20), marginTop: adapt(20) }}>性别</Text>
          <View style={{ marginLeft: adapt(20) }}>
            {selectedData.map((item, index) => <View style={{ flexDirection: 'row', alignItems: 'center', marginTop: adapt(20) }} key={index}>
              <TouchableOpacity activeOpacity={0.6} onPress={() => this._selected(item)}>
                {item.status ? <Image source={Images.common.icon_selected} style={{ width: adapt(18), height: adapt(18) }} /> :
                  <Image source={Images.common.icon_unselected} style={{ width: adapt(18), height: adapt(18) }} />}
              </TouchableOpacity>
              <Text style={{ marginLeft: adapt(20), color: '#000', fontSize: adapt(18) }}>{item.title}</Text>
            </View>)}
          </View>
        </Modal>
        {/* 备注弹窗 */}
        <ModalBoxAdapt style={{ height: adapt(160), width: width, backgroundColor: '#ededed' }}
          position='bottom' ref='modal2' swipeToClose={false} backdropOpacity={0.3} onClosed={this.onClose}>
          <TextInput
            autoFocus={this.state.show != 0} multiline={true}
            style={styles.textInputStyle} value={this.state.show == 1 ? this.state.sign : this.state.intro}
            onChangeText={(text) => { this.state.show == 1 ? this.setState({ sign: text }) : this.setState({ intro: text }) }}
            underlineColorAndroid='transparent' />
          <TouchableOpacity onPress={() => { this.setState({ show: 0 }); this.refs.modal1.close(); this.refs.modal2.close(); }} activeOpacity={.9} style={styles.sureCellStyle}>
            <Text style={{ color: '#fff' }}>确定</Text>
          </TouchableOpacity>
        </ModalBoxAdapt>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#ededed'
  },
  containerWhite: {
    backgroundColor: '#fff'
  },
  textInputStyle: {
    width: width - adapt(30),
    marginTop: adapt(15),
    height: adapt(100),
    padding: adapt(8),
    marginHorizontal: adapt(15),
    backgroundColor: '#fff',
    borderWidth: adapt(1),
    borderColor: '#d8d8d8',
    textAlignVertical: 'top',
    borderRadius: adapt(4)
  },
  sureCellStyle: {
    width: adapt(58),
    height: adapt(30),
    marginRight: adapt(15),
    marginVertical: adapt(7),
    backgroundColor: '#2a90d7',
    justifyContent: 'center',
    alignItems: 'center',
    alignSelf: 'flex-end',
    borderRadius: adapt(4)
  },
  itemCell: {
    height: adapt(50),
    marginLeft: adapt(18),
    paddingRight: adapt(18),
    alignItems: 'center',
    flexDirection: 'row',
    justifyContent: 'space-between',
    borderBottomWidth: StyleSheet.hairlineWidth,
    borderColor: '#dcdcdc',
    backgroundColor: '#fff'
  },
  rightIcon: {
    width: adapt(20),
    height: adapt(20),
    tintColor: '#b1b1b1',
    marginLeft: adapt(5)
  },
  updateNameTextStyle: {
    fontSize: adapt(20),
    fontWeight: '400',
    marginLeft: adapt(20),
    marginVertical: adapt(20)
  },
  textInptStyle: {
    width: width - adapt(90),
    marginLeft: adapt(15),
    paddingLeft: adapt(5),
    borderRadius: adapt(6),
    height: adapt(40),
    backgroundColor: '#ddd'
  },
  actionCell: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'flex-end',
    marginTop: adapt(30)
  },
  cellStyle: {
    height: adapt(10),
    backgroundColor: '#ededed',
    borderBottomWidth: StyleSheet.hairlineWidth,
    borderColor: '#dcdcdc',
    borderTopWidth: StyleSheet.hairlineWidth
  }
});
